<template>
  <div>
    <div ref="lineCharts" style="width:90%; height:350px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  data() {
    return {
      lineCharts: null,
      flag: false,
      model: {
        dataX: [],
        legendData: [],
        series: [],
      },
    };
  },
  watch: {
    // 监听重新渲染 echarts
    model(newVal) {
      this.model = newVal;
      this.flag = true;
      this.initChart();
    },
  },
  methods: {
    // 初始化
    initChart() {
      this.lineCharts = echarts.init(this.$refs.lineCharts, this.flag);
      const option = {
        title: {
          // text: "Stacked Line",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.model.legendData,
          left: "center",
          bottom: 0, //具体像素值或百分比
          textStyle: {
            //图例文字的样式
            color: "#7C8CA5",
            fontSize: 12,
          },
        },
        grid: {
          left: "3%",
          right: "8%",
          bottom: "10%",
          containLabel: true,
        },
        // 下载图片
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.model.dataX,
          axisLine: {
            show: false,
            textStyle: {
              color: "#7C8CA5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#7C8CA5",
            },
          },
        },

        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            textStyle: {
              color: "#7C8CA5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#7C8CA5",
            },
          },
        },
        series: this.model.series,
      };
      this.lineCharts.setOption(option);
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>
